<template>
    <el-dropdown trigger="click">
        <span class="edu-font-color">
            {{ userName }}({{ userId }})
            <i class="el-icon-arrow-down el-icon--right"/>
        </span>
        <el-dropdown-menu slot="dropdown" class="sysDropdown">
            <el-dropdown-item>
                <router-link to="/workbench">
                    <span>
                        <i class="edu-icon center"/>
                        {{ $t('message.workbench') }}
                    </span>
                </router-link>
            </el-dropdown-item>
            <el-dropdown-item>
                <span @click="logout">
                    <i class="edu-icon exit"/>
                    {{ $t('message.logout') }}
                </span>
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>
<script>
import { logout, getSSOLogoutUrl } from "common/src/api/session";
import axios from "axios";
export default {
    name: "SystemSelect",
    data() {
        return {
            userName: "",
            userId: ""
        };
    },
	computed: {
        currentUser: {
            get() {
                if (this.$store.state.session.user) {
                    return this.$store.state.session.user;
                }
                return JSON.parse(localStorage.getItem("user"));
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        logout() {
            let userType = this.$store.getters.getUser().type;
            let _sessionid = this.$store.getters.getSessionId();
			let _uid = this.currentUser.uid;
            logout({
                sessionid: _sessionid,
				uid: _uid
            }).then(res => {
                this.$store.commit("clear_login_info");
                this.$store.commit("clear_tab_info");
                this.$message({
                    type: "success",
                    message: "成功退出系统"
                });
                if (userType == 3) {
                    this.$router.replace("/locallogin");
                } else {
                    if (this.$store.state.is_sso_saml) {
                        window.location.href = this.$store.state.ssologout;
                    } else {
                        getSSOLogoutUrl(_uid)
                    }
                }
            });
        },
        init() {
            let user = this.$store.getters.getUser();
            this.userName = user.name;
            this.userId = user.uid;
        },
        ssoLogout(url) {
            axios.get(url).catch(error => {
                alert(error);
            });
        },
        avartarClick() {
            this.$emit("avartarClick");
        }
    }
};
</script>
<style lang="scss" scoped>
.sysDropdown {
    .el-dropdown-menu__item {
        padding: 0px;
        span {
            padding: 0 15px;
            display: inline-block;
            width: 100%;
        }
    }
}
.edu-icon {
    display: inline-block;
    vertical-align: text-top;
    margin-right: 8px;
    width: 16px;
    height: 16px;
    &.center {
        background: url("/static/images/icon_center.png");
    }
    &.password {
        background: url("/static/images/icon_password.png");
    }
    &.help {
        background: url("/static/images/icon_help.png");
    }
    &.exit {
        background: url("/static/images/icon_exit.png");
    }
}
.edu-font-color {
    cursor: pointer;
    color: #3A7FE8;
}
.edu-avatar {
    padding-left: 40px;
    .edu-avatar-img {
        position: absolute;
        left: 0;
        bottom: -7px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        &.female {
            background: url("/static/images/icon_pohto_female.png");
        }
        &.male {
            background: url("/static/images/icon_pohto_male.png");
        }
    }
}
</style>
